<template>
  <div class="recommend">
    <div class="recommend-title">热销推荐</div>
    <ul>
      <router-link
          tag="li"
          class="item border-bottom"
          v-for="item of recommend"
          :key="item.id"
          :to="'/detail/' + item.id"
      >
          <img class="item-img" :src='item.imgUrl'>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
      </router-link>
    </ul>
    <div class="footer-title border-bottom"><a href="http://touch.piao.qunar.com/touch/list_%E5%8C%97%E4%BA%AC_%E6%99%AF%E7%82%B9%E9%97%A8%E7%A5%A8.html?region=%E5%8C%97%E4%BA%AC&isForeign=false&pageSize=10">查看所有产品</a></div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommend: Array
  },
  data () {
		  return {
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/ellipsis.styl'
  .recommend-title
    margin-top .2rem
    line-height .8rem
    background-color #eeeeee
    text-indent .1rem
  .footer-title
    line-height .8rem
    background-color #ffffff
    text-align center
    color: #00afc7
  .item
    overflow hidden
    display: flex
    height 1.9rem
    .item-img
      width 1.7rem
      height 1.7rem
      padding .1rem
    .item-info
      flex 1
      padding .1rem
      min-width 0
    .item-title
      line-height .54rem
      font-size .32rem
      ellipsis()
    .item-desc
      line-height .4rem
      color: #616161
      ellipsis()
    .item-button
      border-radius .06rem
      background-color #ff9300
      padding 0 .2rem
      margin-top .2rem
      color: #ffffff
      line-height .44rem
</style>
